<template>
    <div class="wrap">
        <div class="shopcar" v-for="item in list" :key="item.id">
            <div class="close"><mt-switch></mt-switch></div>
            <img :src="item.img" alt="">
            <div class="detail">
                <h5>{{item.title}}</h5>
                <p><span class="price">￥{{item.price}}</span><numberCount :initCount="$store.getters.getDoodsCount[item.id]"/><a href="#" class="del">删除</a></p>
            </div>

        </div>
    </div>
</template>
<script>
//导入购买数量组件
import numberCount from "../comments/number-box/shopNumbox.vue"
import Mui from "../../lib/mui/js/mui.min.js"
import {Toast} from 'mint-ui'
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          count: 1,
          title: "红米note 6plus",
          price: 2190,
          img: "../../images/8.jpg"
        },
        {
          id: 2,
          count: 2,
          title: "华为note 6plus",
          price: 3190,
          img: "../../images/55st.png"
        },
        {
          id: 3,
          count: 3,
          title: "苹果note 6plus",
          price: 6190,
          img: "../../images/106st.png"
        }
      ],
      message:[]//所有的商品的数据
    };
  },
  created(){
      this.getShopList();
  },
  methods: {
    //从后台获取购物车里所有的商品列表
    getShopList() {
      //获取到store中所有商品的id 然后拼接出一个用逗号分隔的字符串
      var idArr = [];
      //循环获取this.$store.state.car中的每一个id 并将其添加到上面的空数组中将参数传过去
      this.$store.state.car.forEach(item => idArr.push(item.id));
      //判断 如果购物中没有商品，则直接返回，不需要请求接口，否则会报错
      if(idArr.length<=0){
          return
      }
      this.$http.get("url/" + idArr.join(',')).then(res=>{
          if(res.data.status === 0){
              //请求成功
              this.message = res.data
          }else{
              Toast('加载购物车商品列表失败！')
          }
      },err=>{
          Toast('请求接口失败！')
      });
    }
  },
  components: {
    numberCount
  }
};
</script>
<style scoped>
.wrap {
  padding: 10px;
}
.shopcar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #cccccc4f;
  box-shadow: 0 0 10px #ccc;
  margin-bottom: 10px;
}
.shopcar img {
  width: 15%;
}
.detail {
  padding-left: 5px;
}
.detail .price {
  color: red;
}
.detail h5 {
  font-weight: 700;
}
.detail p {
  display: flex;
  align-items: center;
}
.del {
  margin-left: 5px;
}
</style>